<template>
    <!-- Header Start -->
    <div class="container-xxl py-5 bg-dark page-header bg-2 mb-5">
        <div class="container my-5 pt-5 pb-4">
            <h1 class="display-3 text-white mb-3 animated slideInDown"> 选择佑恩 </h1>
            <p class="text-white fs-4">专注、迅捷、成就、分享</p>
        </div>
        <div id="goodat"></div>
    </div>
    <!-- Header End -->

    <!-- About Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <h2 class="mb-4 wow fadeInUp" data-wow-delay="0.6s">
                        <span class="text-warning">THINKING</span> /我们的思考方式
                    </h2>
                    <p class="mb-4 wow fadeInUp" data-wow-delay="0.8s">
                        我们习惯于坚持站在客户的角度思考问题，用快速高效的互动策略思考模式打破常规。
                    </p>

                    <p class="wow fadeInUp" data-wow-delay="1.2s">
                        我们坚信每一个成功项目都是良好合作的成果，我们共同思考和创新，帮助客户寻找接近目标人选的最佳互动解决方案。
                    </p>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="row g-0 rounded overflow-hidden">
                        <div class="position-relative keywords-bord">
                            <div class="keywords k1 wow fadeIn" data-wow-delay="0.2s">
                                <div class="content">
                                    <p class="des">Tactics</p>
                                    <p class="tag">搜寻策略</p>
                                </div>
                            </div>
                            <div class="keywords k2 wow fadeIn" data-wow-delay="0.3s">
                                <div class="content">
                                    <p class="des">Employer Brand</p>
                                    <p class="tag">雇主品牌</p>
                                </div>
                            </div>
                            <div class="keywords k3 wow fadeIn" data-wow-delay="0.4s">
                                <div class="content">
                                    <p class="des">Delivery</p>
                                    <p class="tag">交互</p>
                                </div>
                            </div>
                            <div class="keywords k4 wow fadeIn" data-wow-delay="0.5s">
                                <div class="content">
                                    <p class="des">Experience</p>
                                    <p class="tag">体验</p>
                                </div>
                            </div>
                            <div class="keywords k5 wow fadeIn" data-wow-delay="0.6s">
                                <div class="content">
                                    <p class="des">Value</p>
                                    <p class="tag">价值</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-start">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="row g-0 rounded overflow-hidden">
                        <img class="img-fluid w-100" src="/images/about/ab2.jpg" />
                    </div>
                </div>
                <div class="col-lg-6">
                    <h2 class="mb-4 wow fadeInUp text-warning" data-wow-delay="0.6s"> 专业工具 </h2>
                    <p class="mb-4 wow fadeInUp" data-wow-delay="0.8s">
                        利用<b class="text-secondary">“行为面试法”</b> 及<b class="text-secondary"
                            >“测评工具”</b
                        >等多种人才甄选的辅助策略，对候选人胜任力、职业目标、期望薪酬、性格特质与企业文化的适应、候选人与直线经理和团队之间的“缘分”匹配等方面进行分析考察。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <h2 class="mb-4 text-secondary wow fadeInUp" data-wow-delay="0.6s">
                        IT系统支持
                    </h2>
                    <p class="wow fadeInRight" data-wow-delay="1s">
                        <i class="fa fa-desktop text-secondary me-3"></i>
                        内部人才信息管理系统
                    </p>
                    <p class="wow fadeInRight" data-wow-delay="1.2s">
                        <i class="fa fa-desktop text-secondary me-3"></i>
                        人才寻访操作管理系统
                    </p>
                    <p class="wow fadeInRight" data-wow-delay="1.4s">
                        <i class="fa fa-desktop text-secondary me-3"></i>
                        顾问交流社区
                    </p>
                    <p class="wow fadeInRight" data-wow-delay="1.6s">
                        <i class="fa fa-desktop text-secondary me-3"></i>
                        多系统、多平台实现顾问和潜在候选人及顾问内部的沟通交流，提高内部管理、
                        拓展外部资源的能力。
                    </p>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="row g-0 rounded overflow-hidden">
                        <img class="img-fluid w-100" src="/images/about/ab3.jpg" />
                    </div>
                </div>
            </div>
        </div>
        <div id="product"></div>
    </div>

    <!-- About End -->

    <!-- Card Start -->
    <section class="choose-us py-5">
        <div class="container-xxl">
            <div class="row">
                <!-- START CHOOSE-US SECTION TITLE -->
                <h2 class="text-center mb-5">产品与服务</h2>
                <!-- END CHOOSE-US SECTION TITLE -->

                <!-- START CHOOSE ITEM -->
                <div class="choose-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="choose">
                        <div class="img-box">
                            <img
                                class="img-fluid"
                                src="/images/detail/choose-03.jpg"
                                alt="graphics-picture"
                            />
                        </div>
                        <div class="text-center">
                            <i class="icon fa fa-search fa-2x"></i>
                            <h5>高端人才猎寻</h5>
                            <p class="text-start">
                                依托猎头顾问对客户公司背景及职位背景等咨
                                询，通过人才库及人脉搜索、甄选、评估、推
                                荐，帮助企业完成关键岗位的招募
                                <br />
                                <br />
                                <br />
                            </p>
                        </div>
                    </div>
                </div>
                <!-- END CHOOSE ITEM -->

                <!-- START CHOOSE ITEM -->
                <div class="choose-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="choose">
                        <div class="img-box">
                            <img
                                class="img-fluid"
                                src="/images/about/ab1.png"
                                alt="design-picture"
                            />
                        </div>
                        <div class="text-center">
                            <i class="icon fa fa-map fa-2x"></i>
                            <h5>人才地图</h5>
                            <p class="text-start">
                                猎头顾问通过系统性的行业人才盘点、薪酬福利
                                架构咨询、对标公司架构调研、奖金及股权机制
                                调研等帮助企业了解市场状况及对标公司人才状况。
                                <br />
                                <br />
                                <br />
                            </p>
                        </div>
                    </div>
                </div>
                <!-- END CHOOSE ITEM -->

                <!-- START CHOOSE ITEM -->
                <div class="choose-item col-lg-4 col-md-6 mx-auto p-0 mt-5">
                    <div class="choose">
                        <div class="img-box">
                            <img
                                class="img-fluid"
                                src="/images/detail/choose-02.jpg"
                                alt="development-picture"
                            />
                        </div>
                        <div class="text-center">
                            <i class="icon fa fa-desktop fa-2x"></i>
                            <h5>招聘流程外包(RPO)</h5>
                            <p class="text-start">
                                我们将作为您战略合作伙伴与您的企业内部团队
                                紧密合作，通过对流程设计、人才寻访、人才选
                                拔的需求咨询，制定招聘战略，有针对性地提供
                                部分或全流程招聘外包服务，帮助企业提升招聘
                                效率，提高招聘质量，同时降低招聘成本
                            </p>
                        </div>
                    </div>
                </div>
                <!-- END CHOOSE ITEM -->
            </div>
        </div>
    </section>
    <!-- Card End -->

    <!-- Hope End -->
    <div class="container-xxl py-5 mb-5">
        <div class="overflow-hidden p-2 p-md-5 m-md-3 text-center">
            <div class="col-md-10 p-lg-10 mx-auto">
                <h2 class="mb-4 animated fadeInUp">专业流程</h2>
                <p>专业服务流程，确保高效交付</p>

                <div class="steps-box" :class="{ mobile: width <= 680 }">
                    <div class="step wow fadeInLeft" data-wow-delay="0">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>01</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>与客户就职位和职位分析进行沟通</h5>
                            Communication with client about the position and position analyze
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.1s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>02</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>目标筛选与客户沟通目标</h5>
                            Target Screening & Communication with clients about target
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.2s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>03</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>候选人搜索</h5>
                            Candidates Searching
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.3s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>04</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>候选人电话筛选</h5>
                            Candidate telephone screening
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.4s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>05</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>面试与评估</h5>
                            Interview and assessment
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.5s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>06</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>对候选人进行调查和核实</h5>
                            Reference Check
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.6s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>07</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>与客户沟通候选人</h5>
                            Communicate with Client about Candidate
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.7s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>08</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>客户面试安排</h5>
                            Interview Arrangement for Client
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.8s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>09</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>面试后的客户沟通</h5>
                            Client Communication after interview
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="0.9s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>10</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>Offer 沟通</h5>
                            Offer Communicating
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="1s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>11</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>考察客户沟通</h5>
                            Probation Client Communication
                        </div>
                    </div>

                    <div class="step wow fadeInLeft" data-wow-delay="1.1s">
                        <div class="head">
                            <div class="inner">
                                <div>step</div>
                                <div>12</div>
                            </div>
                        </div>
                        <div class="main">
                            <h5>候选人表现跟踪</h5>
                            Candidate Performance Tracking
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hope End -->
</template>

<script setup lang="ts">
    import { useWindowSize } from '@vueuse/core';
    import { computed } from 'vue';

    const { width } = useWindowSize();
</script>

<style lang="scss">
    /*keywords-bord*/
    .keywords-bord {
        height: 400px;
        width: 300px;
        margin: 0 auto;
    }
    .keywords-bord .keywords {
        position: absolute;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 160px;
        height: 160px;
        border-radius: 100%;
        top: 0px;
        left: 50%;
        margin-left: -80px;
        transform-origin: 50% 120%;
    }
    .keywords-bord .keywords .des {
        margin-bottom: 0;
        font-weight: bold;
        text-align: center;
    }
    .keywords-bord .keywords .tag {
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    .keywords-bord .keywords.k1 {
        z-index: 1;
        background-color: #009933;
        transform: rotate(0);
    }

    .keywords-bord .keywords.k2 {
        z-index: 2;
        background-color: #994500;
        transform: rotate(72deg);
    }
    .keywords-bord .keywords.k2 .content {
        transform: rotate(-72deg);
    }

    .keywords-bord .keywords.k3 {
        z-index: 3;
        background-color: #002b99;
        transform: rotate(144deg);
    }

    .keywords-bord .keywords.k3 .content {
        transform: rotate(-144deg);
    }

    .keywords-bord .keywords.k4 {
        z-index: 4;
        background-color: #99004d;
        transform: rotate(216deg);
    }

    .keywords-bord .keywords.k4 .content {
        transform: rotate(-216deg);
    }

    .keywords-bord .keywords.k5 {
        z-index: 5;
        background-color: #e5cb01;
        transform: rotate(288deg);
    }

    .keywords-bord .keywords.k5 .content {
        transform: rotate(-288deg);
    }

    /* steps */

    .steps-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-top: 30px;

        &.mobile .step {
            transform: scale(0.7);
        }
    }

    .steps-box .step {
        width: 673px;
        height: 120px;
        border-radius: 60px;
        position: relative;
        margin-bottom: 60px;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        background-color: transparent;
    }
    @keyframes abccc {
        from {
            bottom: -50px;
        }
        to {
            bottom: -45px;
        }
    }
    .steps-box .step::after {
        content: '\f107';
        display: block;
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        left: 50%;
        bottom: -50px;
        color: rgb(91, 91, 91);
        box-sizing: border-box;
        font-size: 24px;
        font-weight: 600;
        animation: abccc linear 1000ms infinite;
    }

    .steps-box .step:last-child {
        margin-bottom: 0;
    }

    .steps-box .step:last-child::after {
        opacity: 0;
    }

    .steps-box .step .head {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: auto;
        left: 0;
        margin-top: -60px;
        width: 120px;
        height: 120px;
        border-radius: 120px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .steps-box .step .head .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 105px;
        height: 105px;
        border-radius: 115px;
        font-size: 26px;
        line-height: 26px;
        font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
        font-weight: 400;
        color: #fff;
        background-color: var(--primary);
    }

    .steps-box .step .head .inner div:first-child {
        margin-top: 0px;
        font-size: 16px;
        line-height: 24px;
    }

    .steps-box .step .main {
        background-color: var(--primary);
        color: #fff;
        height: 120px;
        border-radius: 120px;
        position: absolute;
        top: 50%;
        margin-top: -60px;
        left: 10px;
        right: 0;
        z-index: 2;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 120px;
        padding-right: 80px;
        font-size: 16px;
        font-weight: bold;
    }

    .steps-box .step .main h5 {
        color: inherit;
    }

    .guid-links .actived {
        background-color: var(--primary);
        color: #fff;
    }

    .guid-links div {
        cursor: pointer;
    }

    .dropdown-item:active {
        color: #fff;
        background-color: var(--primary);
    }
</style>
